"use client"

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Button } from "@/components/ui/button"
import { Upload, FileText } from 'lucide-react'
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function TeacherDashboard() {
  return (
    <div className="container mx-auto p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">教师页面</h1>
        <Button variant="outline">退出登录</Button>
      </div>

      <Card>
        <CardContent className="p-6">
          <Tabs defaultValue="grades">
            <TabsList className="grid w-full grid-cols-2 mb-6">
              <TabsTrigger value="grades">成绩录入</TabsTrigger>
              <TabsTrigger value="documents">上传文档</TabsTrigger>
            </TabsList>

            <TabsContent value="grades">
              <div className="grid grid-cols-2 gap-4 mb-6">
                <div>
                  <Label htmlFor="course" className="block text-sm font-medium mb-2">课程:</Label>
                  <Select>
                    <SelectTrigger id="course">
                      <SelectValue placeholder="选择课程" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="math">高数</SelectItem>
                      <SelectItem value="physics">物理</SelectItem>
                      <SelectItem value="english">英语</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                
                <div>
                  <Label htmlFor="class" className="block text-sm font-medium mb-2">搜索班级:</Label>
                  <Select>
                    <SelectTrigger id="class">
                      <SelectValue placeholder="选择班级" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="22002">22002班</SelectItem>
                      <SelectItem value="22003">22003班</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="rounded-md border">
                <table className="w-full">
                  <thead>
                    <tr className="border-b bg-muted/50">
                      <th className="p-4 text-left">班级</th>
                      <th className="p-4 text-left">人数</th>
                      <th className="p-4 text-left">成绩录入情况</th>
                      <th className="p-4 text-left">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr className="border-b">
                      <td className="p-4">22002班</td>
                      <td className="p-4">34人</td>
                      <td className="p-4">未开始录入</td>
                      <td className="p-4">
                        <Button variant="secondary" size="sm">
                          <Upload className="w-4 h-4 mr-2" />
                          上传成绩
                        </Button>
                      </td>
                    </tr>
                    <tr className="border-b">
                      <td className="p-4">22003班</td>
                      <td className="p-4">40人</td>
                      <td className="p-4">未开始录入</td>
                      <td className="p-4">
                        <Button variant="secondary" size="sm">
                          <Upload className="w-4 h-4 mr-2" />
                          上传成绩
                        </Button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </TabsContent>

            <TabsContent value="documents">
              <div className="space-y-6">
                <div>
                  <Label htmlFor="document-type" className="block text-sm font-medium mb-2">文档类型:</Label>
                  <Select>
                    <SelectTrigger id="document-type">
                      <SelectValue placeholder="选择文档类型" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="syllabus">教学大纲</SelectItem>
                      <SelectItem value="courseware">课件</SelectItem>
                      <SelectItem value="assignment">作业</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div>
                  <Label htmlFor="file-upload" className="block text-sm font-medium mb-2">选择文件:</Label>
                  <Input id="file-upload" type="file" />
                </div>

                <Button>
                  <FileText className="w-4 h-4 mr-2" />
                  上传文档
                </Button>

                <div className="mt-8">
                  <h3 className="text-lg font-medium mb-4">已上传文档</h3>
                  <div className="space-y-4">
                    {['教学大纲2023.pdf', '第一章课件.pptx', '期中作业.docx'].map((doc, index) => (
                      <div key={index} className="flex items-center justify-between p-4 border rounded-md">
                        <div className="flex items-center space-x-4">
                          <FileText className="w-6 h-6 text-blue-500" />
                          <span>{doc}</span>
                        </div>
                        <Button variant="outline" size="sm">查看</Button>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}

